<template>
  <view>
    <view class="goods_item">
      <!-- 左侧 -->
      <view class="goods_item_left">
        <radio :checked="goods.goods_state" color="#c00000" v-if="showRadios" @click="radioClickHandler"></radio>
        <image :src="goods.goods_small_logo || defaltPic"></image>
      </view>
      <!-- 右侧 -->
      <view class="goods_item_right">
        <!-- 标题 -->
        <view class="item_title">{{goods.goods_name}}</view>
        <!-- 价格盒子 -->
        <view class="item_info">
          <!-- 价格 -->
          <view class="item_price">¥{{goods.goods_price | tofixed()}}</view>
          <!-- 商品数量 -->
          <uni-number-box :min="1" :value="goods.goods_count" v-if="showNum" @change="numChangeHandler"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
      goods:{
        type:Object,
        default:{}
      },
      showRadios:{
        type:Boolean,
        default:false
      },
      showNum:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        defaltPic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.suning.cn%2Fcontent%2Fcatentries%2F00000000010143%2F000000000101432433%2Ffullimage%2F000000000101432433_1f.jpg&refer=http%3A%2F%2Fimage.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648106055&t=a96739793d4bad21a5a4a1e10fe8abc6'
      };
    },
    filters:{
      tofixed(num){
        return Number(num).toFixed(2)
      }
    },
    methods:{
      radioClickHandler(){
        this.$emit('radio-change',{
          goods_id: this.goods.goods_id,
          goods_state: !this.goods.goods_state
        })
      },
      // NumberBox组件的change事件处理函数
      numChangeHandler(val){
        this.$emit('num-change',{
          goods_id: this.goods.goods_id,
          goods_count: +val
        })
      }
    }
  }
</script>

<style lang="scss">
.goods_item{
  width: 750rpx;
  box-sizing: border-box;
  display: flex;
  padding:10px 5px;
  border-bottom: 1px solid #efefef;
}
.goods_item_left{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods_item_left image{
  display: block;
  width: 100px;
  height: 100px;
}
.goods_item_right{
  display: flex;
  flex: 1;
  flex-direction: column;  
  justify-content: space-between;
  margin-left: 5px;
}
.item_title{
  font-size: 13px;
}
.item_price{
  color: #c00000;
  font-size: 16px;
  font-weight: bold;
}
.item_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
